<template>
	<view class="tabbar">
		<van-tabbar :active="actives" @change="onChange" active-color="#4BA677">
			<van-tabbar-item v-for="(item,index) in menuList" :key="index">
				<template #icon>
					<image :class="[`icon${index}`]" :src="item.icon" mode="aspectFit" />
				</template>
				<template #icon-active>
					<image :class="[`icon${index}`]" :src="item.a_icon" mode="aspectFit" />
				</template>
				{{item.text}}
			</van-tabbar-item>
		</van-tabbar>
	</view>

</template>

<script>
	export default {
		props: {
			active: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				actives: 0,
				menuList: [{
						icon: this.$https.assetsPath + '5729abc5cb87ecc05e473dd5751f4aa3bdd71970.png',
						text: '首页',
						a_icon:this.$https.assetsPath + 'cebfb82387bd15ad1cbdc5d434b4e1b993d22f43.png',
						url: '/pages/index/index'
					},
					{
						icon: this.$https.assetsPath + 'img113.png',
						text: '地图',
						a_icon: this.$https.assetsPath + 'img131.png',
						url: '/pages/venues/index'
					},
					{
						icon: this.$https.assetsPath + 'dfdc313053f8a56bc01ff89cb6a64982a38cca03.png',
						text: '',
						a_icon: this.$https.assetsPath + '17cea20a3b52f6940b79be0b1a546121f7dcb276.gif',
						url: '/pages/consumption-code/consumption-code'
					},
					{
						icon: this.$https.assetsPath + 'img129.png',
						text: '停车',
						a_icon: this.$https.assetsPath + 'img132.png',
						url: '/pages/cars-info/cars_parking'
					},
					{
						icon: this.$https.assetsPath + '65934dbdeb395c9670e558efa227255be8ac739f.png',
						text: '我的',
						a_icon: this.$https.assetsPath + '6a807645ee3cc552fe51a190f03bada64f4f5ebe.png',
						url: '/pages/personal/personal'
					}
				]
			}
		},
		created() {
			this.actives = this.active
		},
		options: {
			styleIsolation: 'shared'
		},
		methods: {
			onChange(event) {
				this.actives = event.detail
				uni.reLaunch({
					url: this.menuList[event.detail].url
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .van-tabbar {
		height: 220rpx !important;
		align-items: flex-end;
		// filter: drop-shadow(0px -7rpx 9.5rpx rgba(255,64,64,0.05));
		background-image: url( "https://oss.szsportscenter.cn/img/9d7a70faa5ee4d73e1ef10b1fc874052a09d2b5d.png");
		background-color: transparent !important;
		background-size: 100% 100%;
		padding-bottom: 13rpx !important;
		background-position: 0 100%;

		&:after {
			display: none;
		}
	}

	/deep/ .van-tabbar-item {
		margin-bottom: 60rpx;
	}

	.icon0 {
		width: 40rpx;
		height: 36rpx;
	}

	.icon1 {
		width: 40rpx;
		height: 36rpx;
	}

	.icon2 {
		width: 130rpx;
		height: 130rpx;
		// filter: drop-shadow(0px 9rpx 17.04rpx rgba(255,64,64,0.33));
	}

	.icon3 {
		width: 40rpx;
		height: 36rpx;
	}

	.icon4 {
		width: 40rpx;
		height: 36rpx;
	}
</style>